<template>
  <div class="search-box-container">
    <Dropdown trigger="click">
      <div class="search">
        <Input
          v-model="value"
          placeholder="请输入关键字"
          :style="{ width: width }"
          @keyup.enter.native="goSearch"
        />
        <Icon class="search-icon" type="ios-search" @click="goSearch" />
      </div>
      <DropdownMenu slot="list" class="menu">
        <div class="search-history-container">
          <div class="search-history">
            <span>搜索记录</span>
            <span class="trash" @click="clearAll"
              ><Icon type="ios-trash" size="20" />清空</span
            >
          </div>
        </div>
        <div v-if="history.length == 0" class="no-history">暂无搜索记录</div>
        <DropdownItem
          v-else
          v-for="item in history"
          class="history-item"
          :key="item"
          name="item"
          @click.native="itemClick(item,$event)"
        >
          {{ item }}
          <Icon type="ios-close" class="delete" size="20" />
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <div class="answer">
      <button @click="toQuestion">提问</button>
    </div>
  </div>
</template>

<script>
import axios from "@/util/axios";

export default {
  name: "SearchBox",
  data() {
    return {
      value: "",
      history: [],
      modal1: false,
      avatarImg: localStorage.getItem("avatarImg"),
      imgs: [],
      i: 0,
    };
  },
  props: {
    width: {
      type: String,
      default: "25rem",
    },
  },
  methods: {
    // 最后提交的
    submitImg() {
    },
    // 拖拽图片
    handleDrag(e) {
      const file = e.dataTransfer.files[0];
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = (e) => {
        this.imgs.push({
          imgUrl: e.target.result,
          id: ++this.i,
        });
        console.log(this.imgs);
      };
    },
    // 选择图片
    chooseImg() {
      let inp = this.$refs.file;
      inp.click();
      inp.onchange = (e) => {
        const file = e.target.files[0];
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = (e) => {
          this.imgs.push({
            imgUrl: e.target.result,
          });
          console.log(this.imgs);
        };
        inp.value = null;
      };
    },
    // 弹出层点击确定
    ok() {},
    //点击下拉框
    itemClick(item,e) {
      //当点击删除按钮
      if (e.target.classList.contains("delete")) {
        let index = this.history.indexOf(e.target.parentElement.innerText);
        this.history.splice(index, 1);
        localStorage.setItem("hisotry", this.history);
      } else {
        //点击历史记录,跳转
        let routeData = this.$router.resolve({
          path: `/search/${item}`,
        });
        window.open(routeData.href, "_blank");
      }
    },
    //点击提问触发事件
    goSearch() {
      //判空处理
      if (this.value === "") return;

      //记录搜索记录
      //先判断是否曾经搜索过
      if (this.history.indexOf(this.value) === -1) {
        this.history.push(this.value);
        localStorage.setItem("history", JSON.stringify(this.history));
      }
      // 路由跳转
      let routeData = this.$router.resolve({
        path: `/search/${this.value}`,
      });
      window.open(routeData.href, "_blank");
    },
    //清空搜索记录
    clearAll() {
      this.history = [];
      localStorage.setItem("history", this.history);
    },
    //弹出提问框
    toQuestion() {
      this.$store.commit("changeWriteQuestion", true);
    },
  },
  mounted() {
    this.history = localStorage.getItem("history")
      ? JSON.parse(localStorage.getItem("history"))
      : [];
  },
};
</script>

<style lang="scss" scoped>
.contain {
  .img {
    img {
      width: 3rem;
      height: 3rem;
      border-radius: 0.3rem;
    }
  }
  .icos {
    .ico {
      font-size: 2.5rem;
      float: right;
      cursor: pointer;
    }
  }
  .content {
    // height: 10rem;
    border: 1px solid #eee;
    padding: 1rem;
    img {
      display: block;
      width: 30rem;
      height: 20rem;
      margin: 0.5rem;
    }
  }
}
.search-box-container {
  display: flex;
  .search {
    line-height: 6rem;
    position: relative;
    .search-icon {
      position: absolute;
      right: 0.4rem;
      top: 2rem;
      font-size: 2.5rem;
      cursor: pointer;
    }
  }
  .answer {
    position: relative;
    width: 5.5rem;
    height: 6rem;
    margin-left: 1rem;
    button {
      position: absolute;
      right: 0;
      top: 53%;
      transform: translateY(-50%);
      padding: 0 1rem;
      height: 3.2rem;
      background-color: #0084ff;
      color: #fff;
      border: 1px solid;
      border-radius: 3px;
    }
  }
  .menu {
    width: 25rem;
    // position: absolute;
    // top: 2rem;
    z-index: 99;
    .search-history-container {
      padding: 0 1.5rem;
      margin-bottom: 0.2rem;
      .search-history {
        font-size: 1.5rem;
        line-height: 4rem;
        display: flex;
        justify-content: space-between;
        border-bottom: 0.1rem solid #8590a6;
        color: #8590a6;
        .trash {
          cursor: pointer;
          &:hover {
            color: #175199;
          }
        }
      }
    }
    .no-history {
      text-align: center;
      height: 6rem;
      margin-top: 4rem;
    }
    .history-item {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>